<template>
  <!-- ✅ PC 结构 -->
  <div v-if="!isMobile" class="Huangheader">
    <!-- Logo -->
    <img
      class="dianping-logo-pic"
      src="https://p0.meituan.net/ingee/71cc6fa5c239993fc77016deea894a1013200.png"
      alt="大众点评"
    />

    <!-- 中间：城市 + 搜索框 -->
    <div class="padding-div-pc">
      <div class="city-select-content">
        <el-icon><LocationInformation /></el-icon>
        <div class="city-select-text">大连</div>
        <div class="city-select-drop">
          <el-icon><ArrowDown /></el-icon>
        </div>
      </div>

      <div class="search-bar">
        <el-input
          v-model="input1"
          placeholder="输入商户名、地点或菜品"
          class="custom-input"
          :prefix-icon="Search"
          @keyup.enter="handleSearch"
        />
      </div>
    </div>

    <!-- 右侧按钮和用户 -->
    <div class="header-r-desc-pc">
      <el-dropdown class="service-dropdown">
        <span class="dropdown-link">商户服务</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>服务1</el-dropdown-item>
            <el-dropdown-item>服务2</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-dropdown class="about-dropdown">
        <span class="dropdown-link">关于我们</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>介绍</el-dropdown-item>
            <el-dropdown-item>团队</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-dropdown class="user-dropdown">
        <div class="user-container">
          <img
            class="user-face"
            src="https://p0.meituan.net/ingee/a29ea7a6829bbee66caa6da8bb0928dc14919.png"
            @click="goToMyPage"
          />
          <span class="nick-name">等日落</span>
          <el-icon class="el-icon--right"><ArrowDown /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>我的订单</el-dropdown-item>
            <el-dropdown-item>我的评价</el-dropdown-item>
            <el-dropdown-item>我的收藏</el-dropdown-item>
            <el-dropdown-item>我的订座</el-dropdown-item>
            <el-dropdown-item>酒店订单</el-dropdown-item>
            <el-dropdown-item>消息</el-dropdown-item>
            <el-dropdown-item>设置</el-dropdown-item>
            <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <el-button type="warning" class="open-app-button">去APP查看更多内容</el-button>
    </div>
  </div>

  <!-- ✅ 移动端结构 -->
  <div v-else class="mobile-header">
    <div class="mobile-top-row">
      <img
        class="dianping-logo-pic"
        src="https://p0.meituan.net/ingee/71cc6fa5c239993fc77016deea894a1013200.png"
        alt="大众点评"
      />
      <el-button type="warning" class="open-app-button">去APP查看更多内容</el-button>
    </div>
    <div class="mobile-middle-row">
      <div class="city-select-content">
        <el-icon><LocationInformation /></el-icon>
        <div class="city-select-text">大连</div>
        <div class="city-select-drop">
          <el-icon><ArrowDown /></el-icon>
        </div>
      </div>

      <div class="search-bar">
        <el-input
          v-model="input1"
          placeholder="输入商户名、地点或菜品"
          class="custom-input"
          :prefix-icon="Search"
          @keyup.enter="handleSearch"
        />
      </div>

      <div class="user-container">
        <img
          class="user-face"
          src="https://p0.meituan.net/ingee/a29ea7a6829bbee66caa6da8bb0928dc14919.png"
          @click="goToMyPage"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { LocationInformation, ArrowDown, Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const input1 = ref('')
const isMobile = ref(window.innerWidth <= 768)
const userStore = useUserStore()
const router = useRouter()

const handleSearch = () => {
  router.push('/404')
}

const handleResize = () => {
  isMobile.value = window.innerWidth <= 768
}

const handleLogout = () => {
  userStore.logout()
  router.push('/Huanglogin')
}

const goToMyPage = () => {
  router.push('/HuangMy')
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
/* 共用 */
.dianping-logo-pic {
  height: 30px;
}

/* PC 样式 */
.Huangheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px; /* 左右内边距稍大一点 */
  background-color: #fff;
  height: 60px;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
}

.padding-div-pc {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 30px; /* 城市选择和搜索框间距加大 */
}

.city-select-content {
  display: flex;
  align-items: center;
  color: #333;
  cursor: pointer;
  padding-right: 10px; /* 右侧内边距，避免和搜索框紧贴 */
}

.city-select-text {
  margin: 0 12px; /* 字左右间距略增 */
}

.search-bar {
  width: 380px; /* 搜索框略宽 */
}

/* 搜索框 */
.custom-input :deep(.el-input__wrapper) {
  border-radius: 30px;
  border: 2px solid #ddd;
  height: 38px; /* 高度微调 */
  padding: 0 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-input :deep(.el-input__inner) {
  height: 38px;
  font-size: 14px;
  color: #333;
}

/* 输入框聚焦橙色边框和阴影 */
.custom-input :deep(.el-input__wrapper):focus-within {
  border-color: #ff6600 !important;
  box-shadow: 0 0 6px #ff6600aa;
}

.header-r-desc-pc {
  display: flex;
  align-items: center;
  gap: 28px; /* 右侧菜单项间距更大 */
}

/* 右侧菜单文字下划线滑动效果 */
.dropdown-link {
  position: relative;
  cursor: pointer;
  color: #333;
  transition: color 0.3s ease;
  padding-bottom: 4px; /* 给下划线留空间 */
}
.city-select-content {
  display: flex;
  align-items: center;
  color: #333;
  cursor: pointer;
  transition: color 0.3s ease;
}

.city-select-content:hover {
  color: #ff6600;
}

.user-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.3s ease;
  color: #666;
}

.user-container:hover {
  color: #ff6600;
}

.nick-name {
  margin-right: 4px;
  color: inherit;
  transition: color 0.3s ease;
}

.el-icon--right {
  margin-left: 0;
  color: inherit;
  transition: color 0.3s ease;
}

.dropdown-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #ff6600;
  transition: width 0.3s ease;
  border-radius: 2px;
}

.dropdown-link:hover,
.dropdown-link.active {
  color: #ff6600;
}

.dropdown-link:hover::after,
.dropdown-link.active::after {
  width: 100%;
}

.user-container {
  display: flex;
  align-items: center;
  gap: 12px; /* 头像和昵称间距增大 */
}

.user-face {
  width: 32px; /* 头像稍大一点 */
  height: 32px;
  border-radius: 50%;
  cursor: pointer; /* 添加鼠标指针样式 */
  transition: transform 0.2s ease; /* 添加过渡效果 */
}

.user-face:hover {
  transform: scale(1.1); /* 鼠标悬停时放大效果 */
}

.nick-name {
  color: #666;
}

.open-app-button {
  background-color: #ff6600;
  border-color: #ff6600;
  color: #fff;
  height: 38px; /* 按钮高度与输入框一致 */
  padding: 0 28px;
  font-size: 14px;
  border-radius: 999px;
  line-height: 38px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.open-app-button:hover {
  background-color: #ff7a1f;
  border-color: #ff7a1f;
}

/* 移动端结构样式 */
.mobile-header {
  padding: 12px 16px; /* 内边距稍大 */
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px; /* 各块间距加大 */
}

.mobile-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-middle-row {
  display: flex;
  flex-wrap: nowrap; /* 一行内排布 */
  gap: 16px; /* 元素间距加大 */
  align-items: center;
  justify-content: space-between;
}

.mobile-middle-row .city-select-content {
  flex: 0 0 auto; /* 固定宽度不拉伸 */
  min-width: 90px;
  padding-right: 6px;
}

.mobile-middle-row .search-bar {
  flex: 1 1 auto; /* 剩余空间 */
  min-width: 180px;
}

.mobile-middle-row .user-container {
  flex: 0 0 auto;
  margin-left: 6px;
}

.user-face {
  width: 32px; /* 移动端头像也稍大 */
  height: 32px;
  border-radius: 50%;
}

</style>
